@import "../../var";
@import "../../mixin";
.gzl-label {
  display: block;
  width: px(72);
  word-wrap: break-word;
  word-break: break-all;
  .required {
    color: $clr-warn;
  }
}
.gzl-input {
  width: 100%;
  border: none;
}
// 单选、复选
.gzl-cell_check {
  .icon {
    opacity: 0;
  }
  .gzl-check{
    position: absolute;
    left: -9999em;
    &:checked {
      ~.gzl-check__info {
        color: $clr-active;
      }
      ~.gzl-check__icon {
        opacity: 1;
        color: $clr-active;
        margin-left: px(16);
      }
    }
  }
}
.gzl-cell__tips {
  padding: px(20) px(16);
  h2 {
    font-size: px(16);
    color: #000;
  }
  .tip-info {
    color: $clr-g9;
    &:not(:first-child) {
      margin-top: px(8);
    }
    .decimal {
      min-width: px(15);
      height: px(15);
      line-height: px(15);
      border-radius: px(15);
      padding: 0 px(4);
      text-align: center;
      font-size: px(10);
      color: #fff;
      background: $clr-gc;
      margin: px(2) px(7) 0 0;
    }
  }
}
.gzl-switch {
  display: block;
  appearance: none;
  position: relative;
  width: px(44);
  height: px(24);
  border: px(1) solid #dfdfdf;
  outline: 0;
  border-radius: px(24);
  box-sizing: border-box;
  background-color: #dfdfdf;
  margin: px(-2) 0;
  transition: background-color .1s,border .1s;
  &:before {
    content:" ";
    position:absolute;
    top:0;
    left:0;
    width: px(42);
    height: px(22);
    border-radius: px(22);
    // background-color:#fdfdfd;
    transition:transform .35s cubic-bezier(.45,1,.4,1);
  }
  &:after {
    content:" ";
    position:absolute;
    top:px(1);
    left:px(1);
    width:px(20);
    height:px(20);
    border-radius:px(20);
    background-color:#fff;
    // box-shadow:0 1px 3px rgba(0,0,0,.4);
    transition:transform .35s cubic-bezier(.4,.4,.25,1.35);
  }
  &:checked {
    border-color:#FFD800;
    background-color:#FFD800;
    &:before {
      transform:scale(0)
    }
    &:after {
      transform:translateX(px(20))
    }
  }
}
.gzl-textarea {
  display: block;
  border: 0;
  resize: none;
  width: 100%;
}
.gzl-textarea-counter {
  color: #b2b2b2;
  text-align: right;
}
.gzl-count {
  display: flex;
  width: px(100);
  .gzl-count__num {
    flex: 1;
    text-align: center;
    font-size: px(16);
    line-height: px(20);
    color: $clr-g3;
  }
  .gzl-count__minus,
  .gzl-count__plus {
    position: relative;
    color: $clr-g6;
    &:after {
      content: '';
      width: 200%;
      height: 200%;
      position: absolute;
      top: -50%;
      left: -50%;
    }
    &.disabled {
      color: $clr-gd;
      ~.gzl-check__icon {
        opacity: 1;
        color: $clr-active;
        margin-left: px(16);
      }
    }
  }
}
.gzl-option {
  font-size: 0;
  label {
    position: relative;
    display: inline-block;
    &:not(:first-child) {
      margin-left: px(12);
    }
    input {
      position: absolute;
      z-index: -1;
      &:checked {
        ~span {
          background: $clr-main;
        }
      }
    }
    span {
      display: inline-block;
      vertical-align: top;
      font-size: px(12);
      background: $clr-bg;
      min-width: px(50);
      padding: 0 px(10);
      line-height: px(24);
      text-align: center;
      border-radius: px(24);
    }
  }
}
